<template>
	<div>

		<el-button type="primary" @click="centerDialogVisible = true">添加</el-button>

		<el-dialog title="添加用户" :visible.sync="centerDialogVisible" width="30%" center>
			<el-form :model="form" ref="form" label-width="40px">
				<el-form-item label="姓名">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="form.date" autocomplete="off"></el-input>

				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveUser">确 定</el-button>
			</span>
		</el-dialog>

		<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
			<el-table-column prop="id" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="uname" label="姓名" width="180">
			</el-table-column>
			<el-table-column prop="ucreatetime" label="加入时间" width="230">
			</el-table-column>
			<el-table-column prop="age" label="年龄">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>


				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="修改用户" :visible.sync="dialogEditgsVisible" width="30%" center>
			<el-form :model="editForm" ref="editForm">
				<el-form-item label="编号">
					<el-input v-model="editForm.id" disabled autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="editForm.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model.number="editForm.age"></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogEditgsVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEditForm('editForm')">更 新</el-button>
			</div>
		</el-dialog>

		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="[10, 20, 40,100]" :page-size="pagesize" layout="total, sizes,prev, pager, next" :total="tableData.length"
			 prev-text="上一页" next-text="下一页">
			</el-pagination>
		</div>

	</div>

</template>

<script>
	import axios from "axios";
	import Qs from 'qs'

	export default {
		name: "app",
		data() {
			return {
				name: '',
				currentPage: 1, //默认显示页面为1
				pagesize: 10, //    每页的数据条数
				tableData: [], //需要data定义一些，tableData定义一个空数组，请求的数据都是存放这里面
				centerDialogVisible: false,
				dialogEditgsVisible: false,
				form: {
					name: '',
					age: '',
				},
				editForm: {
					name: '',
					id: '',
					age: '',
				}
			}


		},
		mounted() {
			this.getData();

		},
		methods: {
			saveUser() {
				this.centerDialogVisible = false;
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.logining = true;
						this.$axios({
								method: "post",
								url: "http://localhost:88/pgUser/saveUser", // 接口地址
								data: {
									uname: this.form.name, // 传接口参数
									age: Number(this.form.date)
								}
							})
							.then(response => {
								if (response.data.code == 200) {
									this.$message({
										showClose: true,
										message: response.data.msg,
										type: 'success'
									});
								} else {
									this.$message({
										showClose: true,
										message: response.data.msg,
										type: 'warning'
									});
								} // 成功的返回      
							})
							.catch(error => console.log(error, "error")); // 失败的返回
						this.logining = false;
					} else {
						console.log('error submit!');
						return false;
					}
				})
			},
			getData() {
				axios.get('http://localhost:88/pgUser/queryUserList').then(response => {
					console.log(response.data);
					this.tableData = response.data.data;
				}, response => {
					console.log("error");
				});
			},
			//每页下拉显示数据
			handleSizeChange: function(size) {
				this.pagesize = size;
				/*console.log(this.pagesize) */
			},
			//点击第几页
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				/*console.log(this.currentPage) */
			},
			// 点击编辑按钮，弹出编辑模态框
			handleEdit(index, row) {
				this.dialogEditgsVisible = true;
				this.editForm.id = row.id;
				this.editForm.name = row.uname;
				this.editForm.age = row.age;
			},
			//更新编辑数据
			saveEditForm(aaa) {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.logining = true;
						this.$axios({
								method: "post",
								url: "http://localhost:88/pgUser/editUser", // 接口地址
								data: {
									uname: this.editForm.name, // 传接口参数
									age: Number(this.editForm.age),
									id: this.editForm.id
								}
							})
							.then(response => {
								this.dialogEditgsVisible = false;
								if (response.data.code == 200) {
									this.$message({
										showClose: true,
										message: response.data.msg,
										type: 'success'
									});
								} else {
									this.$message({
										showClose: true,
										message: response.data.msg,
										type: 'warning'
									});


								} // 成功的返回      
							})
							.catch(error => console.log(error, "error")); // 失败的返回
						this.logining = false;
					} else {
						console.log('error submit!');
						return false;
					}
				})

			},
			// 删除
			handleDelete(index, row) {
				axios({
						method: "POST",
						url: "http://localhost:88/pgUser/delUser", // 接口地址
						transformRequest: [function(data) {
							// 对 data 进行任意转换处理
							return Qs.stringify(data)
						}],
						headers: {
							'deviceCode': 'A95ZEF1-47B5-AC90BF3'
						},
						data: {
							id: row.id
						},
					})
					.then(response => {
						if (response.data.code == 200) {
							this.$message({
								showClose: true,
								message: response.data.msg,
								type: 'success'
							});
						} else {
							this.$message({
								showClose: true,
								message: response.data.msg,
								type: 'warning'
							});
						}
						console.log(response, "success"); // 成功的返回      
					})
			}

		}
	}
</script>
<style>
</style>
